<template>
  <view class="page">
    <view class="tab">
      <text
        v-for="v in tabs"
        :key="v.key"
        :class="{ 'tab-active': v.key === current }"
        @click="tabChange(v)"
      >
        {{ v.name }}
      </text>
    </view>
    <view class="ranking">
      <view class="rangking-title">
        <text>排名</text>
        <text>昵称</text>
        <text>业绩</text>
      </view>
      <view class="ranking-list">
        <view class="ranking-list-item" v-for="(item, key) in list" :key="key">
          <view class="ranking-list-nickname">
            <text class="rank_index" style="width: 53px">{{ item.rank }}</text>
            <!-- <image v-if="item.rank < 4" :src="'/static/' + item.rank + '.png'"></image> -->
            <text>{{item.nick_name || item.real_name || "-"}}</text>
          </view>
          <text class="ranking-list-score">{{
            item.total_recharge_money
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 分类列表
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      current: 1,
      tabs: [
        { name: "本月", key: 1 },
        { name: "本季度", key: 2 },
        { name: "年度", key: 3 },
      ],
    };
  },
  methods: {
    tabChange(e) {
      this.current = e.key;
      this.$emit("tabChange", e.key);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
